/**
 * Button 组件的主题配置
 * 
 * 基于企业级设计规范 (Button.json) 的完整配置
 * 包含所有按钮变体的样式定义
 */

import type { ComponentToken } from 'antd/es/button/style/token';

// ========== 扩展的 Button Token 类型 ==========

/**
 * 扩展的 Button 组件 Token 类型
 * 在原有 ComponentToken 基础上增加了额外的样式配置
 */
export interface ExtendedButtonToken extends ComponentToken {
  borderRadius?: number;
  borderRadiusLG?: number;
  borderRadiusSM?: number;
  defaultFocusBorderColor?: string;
  defaultFocusBoxShadow?: string;
  defaultFocusOpacity?: number;
}

// ========== 设计 Token 常量 ==========

/**
 * 字体相关 Token
 */
const FONT_TOKENS = {
  // 字体粗细
  fontWeight: {
    normal: 400,
    medium: 500,
    semibold: 600,
  },
  
  // 字体大小
  fontSize: {
    small: 12,
    default: 14,
    large: 16,
  },
  
  // 行高
  lineHeight: {
    default: 1.5714285714285714,
    large: 1.5,
  },
} as const;

/**
 * 间距相关 Token
 */
const SPACING_TOKENS = {
  // 横向内边距
  paddingInline: {
    small: 7,
    default: 15,
    large: 15,
    compact: {
      small: 8,
      default: 12,
      large: 16,
    },
  },
  
  // 纵向内边距
  paddingBlock: {
    small: 0,
    default: 4,
    large: 7,
    compact: {
      small: 0,
      default: 2,
      large: 4,
    },
  },
} as const;

/**
 * 颜色相关 Token
 */
const COLOR_TOKENS = {
  // 基础颜色
  text: {
    primary: 'yellow',
    inverse: '#ffffff',
  },
  
  // 背景颜色
  background: {
    default: '#ffffff',
    transparent: 'transparent',
    textHover: 'rgba(0, 0, 0, 0.06)',
  },
  
  // 边框颜色
  border: {
    default: '#d9d9d9',
    hover: '#40a9ff',
    active: '#0958d9',
    disabled: '#d9d9d9',
    group: '#40a9ff',
  },
  
  // 状态颜色
  state: {
    hover: '#40a9ff',
    active: '#0958d9',
  },
} as const;

/**
 * 阴影相关 Token
 */
const SHADOW_TOKENS = {
  default: '0 2px 0 rgba(0, 0, 0, 0.02)',
  primary: '0 2px 0 rgba(5, 145, 255, 0.1)',
  danger: '0 2px 0 rgba(255, 38, 5, 0.06)',
  none: 'none',
} as const;

/**
 * 图标相关 Token
 */
const ICON_TOKENS = {
  size: 'inherit' as const,
} as const;

/**
 * Button 完整主题配置
 * 
 * 根据设计规范文件 Button.json 定义的企业级按钮样式
 * 涵盖所有按钮类型、状态和尺寸的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Button: buttonThemeConfig } }}>
 *   <Button type="primary">主要按钮</Button>
 *   <Button>默认按钮</Button>
 *   <Button danger>危险按钮</Button>
 * </ConfigProvider>
 * ```
 */
export const buttonThemeConfig: Partial<ExtendedButtonToken> = {
  // ========== 基础样式配置 ==========
  fontWeight: FONT_TOKENS.fontWeight.normal,

  // ========== 字体排版配置 ==========
  contentFontSize: FONT_TOKENS.fontSize.default,
  contentFontSizeLG: FONT_TOKENS.fontSize.large,
  contentFontSizeSM: FONT_TOKENS.fontSize.default,  // 规范中小尺寸也是 14
  
  contentLineHeight: FONT_TOKENS.lineHeight.default,
  contentLineHeightLG: FONT_TOKENS.lineHeight.large,
  contentLineHeightSM: FONT_TOKENS.lineHeight.default,
  
  // ========== 间距配置 ==========
  // 默认尺寸间距
  paddingInline: SPACING_TOKENS.paddingInline.default,
  paddingBlock: SPACING_TOKENS.paddingBlock.default,
  
  // 大尺寸间距
  paddingInlineLG: SPACING_TOKENS.paddingInline.large,
  paddingBlockLG: SPACING_TOKENS.paddingBlock.large,
  
  // 小尺寸间距
  paddingInlineSM: SPACING_TOKENS.paddingInline.small,
  paddingBlockSM: SPACING_TOKENS.paddingBlock.small,
  
  // ========== 阴影效果配置 ==========
  defaultShadow: SHADOW_TOKENS.default,
  primaryShadow: SHADOW_TOKENS.primary,
  dangerShadow: SHADOW_TOKENS.danger,
  
  // ========== 默认按钮颜色配置 ==========
  defaultColor: COLOR_TOKENS.text.primary,
  defaultBg: COLOR_TOKENS.background.default,
  defaultBorderColor: COLOR_TOKENS.border.default,
  
  // 默认按钮悬浮状态
  defaultHoverColor: COLOR_TOKENS.state.hover,
  defaultHoverBg: COLOR_TOKENS.background.default,
  defaultHoverBorderColor: COLOR_TOKENS.border.hover,
  
  // 默认按钮激活状态
  defaultActiveColor: COLOR_TOKENS.state.active,
  defaultActiveBg: COLOR_TOKENS.background.default,
  defaultActiveBorderColor: COLOR_TOKENS.border.active,
  
  // ========== 主要按钮颜色配置 ==========
  primaryColor: COLOR_TOKENS.text.inverse,
  
  // ========== 危险按钮颜色配置 ==========
  dangerColor: COLOR_TOKENS.text.inverse,
  
  // ========== 禁用状态配置 ==========
  borderColorDisabled: COLOR_TOKENS.border.disabled,
  
  // ========== 幽灵按钮配置 ==========
  ghostBg: COLOR_TOKENS.background.transparent,
  defaultGhostColor: COLOR_TOKENS.text.inverse,
  defaultGhostBorderColor: COLOR_TOKENS.text.inverse,
  
  // ========== 实心按钮配置 ==========
  solidTextColor: COLOR_TOKENS.text.inverse,
  
  // ========== 文本按钮配置 ==========
  textTextColor: COLOR_TOKENS.text.primary,
  textTextHoverColor: COLOR_TOKENS.text.primary,
  textTextActiveColor: COLOR_TOKENS.text.primary,
  textHoverBg: COLOR_TOKENS.background.textHover,
  
  // ========== 链接按钮配置 ==========
  linkHoverBg: COLOR_TOKENS.background.transparent,
  
  // ========== 按钮组配置 ==========
  groupBorderColor: COLOR_TOKENS.border.group,
  
  // ========== 图标配置 ==========
  onlyIconSize: ICON_TOKENS.size as any,
  onlyIconSizeLG: ICON_TOKENS.size as any,
  onlyIconSizeSM: ICON_TOKENS.size as any,
};

/**
 * 获取按钮主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myButtonTheme = getButtonTheme({
 *   fontWeight: 600,                    // 自定义字体粗细
 *   primaryColor: '#ff6b35',           // 自定义主要按钮文本色
 *   defaultShadow: '0 4px 8px rgba(0,0,0,0.1)', // 自定义阴影
 * });
 * 
 * <ConfigProvider theme={{ components: { Button: myButtonTheme } }}>
 *   <Button type="primary">自定义主要按钮</Button>
 *   <Button>自定义默认按钮</Button>
 *   <Button danger>自定义危险按钮</Button>
 * </ConfigProvider>
 * ```
 */
export const getButtonTheme = (
  customConfig?: Partial<ExtendedButtonToken>
): Partial<ExtendedButtonToken> => {
  return {
    ...buttonThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Button 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as ButtonComponentToken } from 'antd/es/button/style/token';
